<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%   
response.setHeader("Cache-Control","no-store");   
response.setHeader("Pragma","no-cache");   
response.setDateHeader("Expires",0);   
if (request.getProtocol().equals("HTTP/1.1")) 
response.setHeader("Cache-Control", "no-cache"); 
%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><tiles:insertAttribute name="title" ignore="true"/></title>

<!-- CSS-JQuery -->  
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/start/jquery-ui-1.10.3.custom.css'/>" />
<!-- CSS-JQGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/ui.jqgrid.css'/>" />
<!-- CSS-JMenu -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/jmenu.css'/>"/>  
<!-- CSS-Leftmenu -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/leftmenu.css'/>"/> 

<!-- JS-JQuery -->    
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.9.0.min.js'/>"></script>
<!-- JS-JQuery-UI -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui-1.10.3.custom.min.js'/>"></script>
<!-- JS-JQuery Layout -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery.layout-latest.min.js'/>"></script>
<!-- JS-JMenu -->
<script type="text/javascript" src="<c:url value='/resources/js/jMenu.jquery.min.js'/>"></script>
<!-- JS-LeftMenu -->
<script type="text/javascript" src="<c:url value='/resources/js/scriptbreaker-multiple-accordion-1.js'/>"></script>

<script type="text/javascript">
$(document).ready(function () {
	/** 레이아웃 viewing */
    $('body').layout({ applyDemoStyles: true });
	
	/** Top메뉴 viewing */
    $("#jTopMenu").jMenu();

    /** 메뉴데이터를 구성하여 메뉴를 출력한다 */
    menuItems = ${menuJsonStr}; // 메뉴 JSON Data
   
    // 메뉴구성
    activeFlag = false;
                
    childCount();
    setChildCount();
   
    var htmlTxt = recurseMenu(menuItems[0].PARENT_MENU_ID, 0);    
    $(".ui-layout-west").html(htmlTxt);
    
    /** Left메뉴 Viewing */
    $(".topnav").accordion({
        accordion:false,
        speed: 500,
        closedSign: '[+]',
        openedSign: '[-]'
    });
    
});   

/** Left메뉴 조회,출력 */
function fn_leftMenu(menuAction, menuId) {
    $.ajax({
        type : "post",
        url : '<c:url value="/"/>'+menuAction,
        dataType : "json",
        data : {MENU_ID:menuId},
        success : function(msg) {
        	/** 메뉴데이터를 구성하여 메뉴를 출력한다 */
        	activeFlag = false;
        	
            menuItems = msg;        	
        	childCount();
        	setChildCount();
        	
        	var htmlTxt = recurseMenu(menuId, 0);
        	$(".ui-layout-west").html(htmlTxt);

        	/** Left메뉴 Viewing */
            $(".topnav").accordion({
                accordion:false,
                speed: 500,
                closedSign: '[+]',
                openedSign: '[-]'
            });
        },
        error : function(xhr, status, error) {
        	alert(error);
        }
    });
} 

var h = new Object();
var menuItems; 
var activeFlag = false;

function childCount() {
    $.each(menuItems, function(key,value) {
       h[value.PARENT_MENU_ID] = (h[value.PARENT_MENU_ID]==undefined? 0:h[value.PARENT_MENU_ID])+1;
    });
    
}
function setChildCount() {
    $.each(menuItems, function(key,value) {
        var c = h[value.MENU_ID]==undefined?0:h[value.MENU_ID];
        value.CHILD_COUNT = c;   
    });
}

function recurseMenu(parent, level) {
    var c = (level == 0)? "class='topnav'":""; 
    htmlStrTxt = "<ul " + c + ">";

    for (var x in menuItems) {
        if (menuItems[x].PARENT_MENU_ID == parent) {
        	
        	// active class
            var active;
            if(level == 1 && activeFlag==false) {
                active = "class='active'"; 
                activeFlag = true;
            } else active = "";        	
        	// menu link
            var href = "javascript:void(0);"; 
            var onclick;
            if(level == 1) {
                link = '<c:url value="/"/>'+menuItems[x].MENU_ACTION.substring(1);
                onclick = "javascript:fn_menuClick('"+link+"')";
            } else {
            	onclick = "";
            }
            
            htmlStrTxt += '<li ' + active +'>' + '<a href="'+href+'" onclick="'+onclick+'">' + menuItems[x].MENU_NAME + "</a>";

            if (menuItems[x].CHILD_COUNT > 0) {
                htmlStrTxt += recurseMenu(menuItems[x].MENU_ID, level + 1);
            }
            htmlStrTxt += '</li>';
        }
    }
    return htmlStrTxt + '</ul>';
}

/** 메뉴이동 */
function fn_menuClick(menuAction) {
	$("#workFrame").attr("src", menuAction);
}
</script>
</head> 

<body>
<div class="ui-layout-north">
	<ul id="jTopMenu">
	    <c:if test="${empty topMenuList}">
	    No Data results
	    </c:if>
	    <c:forEach var="item" items="${topMenuList}" varStatus="status">
	        <li>
	            <a href='#' onclick="javascript:fn_leftMenu('<c:out value="${item.MENU_ACTION}"/>','${item.MENU_ID}');">${item.MENU_NAME}</a>
	        </li>
	    </c:forEach>
	</ul>
</div>
<div class="ui-layout-west">
	<!--<ul class="topnav">
	    <li><a href="http://www.scriptbreaker.com" target="scriptbreaker">Home</a></li>
	    <li><a href="#">JavaScript</a>
	        <ul>
	             <li><a href="#">Cookies</a></li>
	             <li><a href="#">Events</a></li>
	             <li><a href="#">Forms</a></li>
	             <li><a href="#">Games</a></li>
	             <li><a href="#">Images</a></li>
	             <li><a href="#">Navigations</a>
	                <ul>
	                    <li><a href="#">CSS</a></li>
	                    <li><a href="#">JavaScript</a></li>
	                    <li><a href="#">JQuery</a></li>
	                </ul>
	            </li>
	             <li><a href="#">Tabs</a></li>
	        </ul>
	    </li>
	    <li><a href="#">Tutorials</a>
	        <ul>
	             <li class="active"><a href="#">HTML</a></li>
	             <li><a href="#">CSS</a></li>
	             <li><a href="#">JavaScript</a></li>
	             <li><a href="#">Java</a>
	                <ul>
	                    <li><a href="#">JSP</a></li>
	                    <li><a href="#">JSF</a></li>
	                    <li><a href="#">JPA</a></li>
	                    <li><a href="http://www.scriptbreaker.com/contact/" target="_blank">Contact</a></li>
	                </ul>
	            </li>
	             <li><a href="#">Tabs</a></li>
	        </ul>
	    </li>
	    <li><a href="http://www.scriptbreaker.com/contact/" target="_blank">Contact</a></li>
	    <li><a href="#">Upload script</a></li>
	</ul>-->
	
	<!--
	<ul class="topnav">
	    <li><a href="#">VOC 처리</a>
	        <ul>
	            <li class="active"><a href="#">나의 VOC</a></li>
	        </ul>
	    </li>
	    <li><a href="#">VOC 현황</a></li>
	    <li><a href="#">개인 환경</a></li>
	    <li><a href="#">기준 정보</a></li>
	    <li><a href="#">시스템 환경</a></li>
	</ul>      -->	
	
	<ul class='topnav'>
	    <!--
	    <li ><a href="#">VOC 처리</a>
	        <ul >
	            <li class='active'><a href="/VOCProject//voc/VocMyjobMngr">나의 VOC</a></li>
	        </ul>
	    </li>
	    <li ><a href="#">VOC 조회</a></li>
	    <li ><a href="#">VOC 현황</a></li>
	    <li ><a href="#">개인 환경</a></li>
	    <li ><a href="#">기준 정보</a></li>
	    <li ><a href="#">시스템 환경</a></li>  
	    -->
    </ul>
</div>

<!--<div class="ui-layout-center">-->
    <!-- IFRAME as layout-pane -->
    <iframe id="workFrame" name="workFrame" class="ui-layout-center" src="http://www.altavista.com" frameborder="0" scrolling="auto"></iframe>
<!--</div>  -->
<!--<div class="ui-layout-east"></div>  -->
<!--<div class="ui-layout-south"></div>  -->
</body>
</html>